<template>
	<view class="fl-s-s">
		<!-- tab -->
		<u-sticky class="w-1" style="background-color: #FFFFFF;">
			<u-tabs class="fm-ali" active-color="#FA360A" inactive-color="#333333" bar-width="55" font-size="32"
				:list="tabs" :current="current" item-width="50%" @change="change"></u-tabs>
			<view class="w-1 p-r-30 fr-s-c fs-28" style="color: #666666; height: 88rpx; background: #F4F4F4;;">{{current==0?'一':'二'}}级总人数（{{list.length}}）人
			</view>
		</u-sticky>
		<view class="w-1 p-r-30 fl-s-s m-t-10">
			<view class="list-item fr-b-c w-1" v-for="(item,index) in list" :key="index">
				<image :src="item.avatar" class="circle" mode="aspectFill" style="width: 80rpx; height: 80rpx;">
				</image>
				<view class="fl-b-s flex-1 m-l-30" style="height: 80rpx;">
					<view class="w-1 fr-b-c fs-30">
						<text style="color: #333333;" class="text-line-1">{{item.nickname}}</text>
						<text style="color: #FA360A;">{{item.total_money}}</text>
					</view>
					<view class="w-1 fr-b-c fs-24" style="color: #666666;">
						<text>{{item.createtime}}</text>
						<text>{{item.xia_count}}个下级</text>
					</view>
				</view>
			</view>
		</view>
		<view class="m-t-250" v-if="nodata">
			<u-empty mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
					name: '一级',
				}, {
					name: '二级',
				}],
				current: 0,
				nodata: false,
				list: []
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				this.$get({
					url: "/appuser/getSubordinate",
					data: {
						access_token: uni.getStorageSync('access_token'),
						level: this.current / 1 + 1
					}
				}).then(res => {
					this.list = res.users
					this.nodata = !this.list.length
				})
			},
			change(index) {
				this.current = index
				this.list = []
				this.getList()
			}
		}
	}
</script>

<style scoped>
	>>>.u-tabs__wrapper__nav__line {
		border-radius: 0 !important;
	}

	.list-item {
		border-bottom: 2rpx solid #F4F4F4;
		padding: 24rpx 0 28rpx 0;
	}

	.list-item:last-child {
		border-bottom: none;
	}
</style>
